<template>
  <div class="feature-group">
    <div v-for="(feature, index) in data" :key="index" class="feature-item-wrapper">
      <feature-item
        :label="feature.title"
        :icon="feature.icon"
        @click="$emit('click', feature)"
      />
    </div>
  </div>
</template>

<script>
import FeatureItem from './FeatureItem.vue'
export default {
  components: { FeatureItem },
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="less">
.feature-group {
  padding: 26px 40px 0;
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;

  .feature-item-wrapper {
    width: 33.3333%;
    text-align: center;
    margin-bottom: 40px;
  }
}
</style>
